<template>
    <section>
        <el-col :span="24" style="padding-top:10px;padding-bottom:10px;">
            <el-button round type="primary" @click="dialogFormVisible = true"  size="small" icon="el-icon-plus">新增用户</el-button> 
             <el-dropdown trigger="click">
                <el-button round size="small" type="primary" plain class="el-dropdown-link">
                    <i><font-awesome-icon :icon="['far','edit']"/></i>&nbsp;批量操作
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>禁用</el-dropdown-item>
                    <el-dropdown-item>删除</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-col>

        <el-dialog title="新增用户" @close="resetForm('addUserForm')" :visible.sync="dialogFormVisible" width="500px">
            <el-row>
                <el-col :span="24">
                     <el-alert style="margin-bottom:10px;" 
                     title="请谨慎分配角色（权限）" 
                     close-text="知道了" type="warning"></el-alert>
                </el-col>
            </el-row>
            <el-form :model="addForm" :rules="rules" ref="addUserForm" size="small" label-width="80px"> 
                    <el-form-item label="用户名" prop="userName">
                        <el-input clearable v-model="addForm.userName"></el-input>
                    </el-form-item>  
                    <el-form-item label="密码" prop="pwd">
                        <el-input clearable v-model="addForm.pwd"></el-input>
                    </el-form-item> 
                    <el-form-item label="真实姓名" prop="realName">
                        <el-input clearable v-model="addForm.realName"></el-input>
                    </el-form-item> 
                    <el-form-item label="手机号" prop="mobile">
                        <el-input clearable v-model="addForm.mobile"></el-input>
                    </el-form-item>
                    <el-row>
                        <el-col :span="18">
                            <el-form-item label="角色" prop="selectRole">
                            <el-select
                                v-model="addForm.selectRole"
                                multiple
                                filterable 
                                @visible-change="visibleChange"
                                default-first-option
                                placeholder="请选择角色标签">
                                <el-option
                                v-for="item in roles"
                                :key="item.id"
                                :label="item.role"
                                :value="item.id">
                                </el-option>
                            </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-popover
                                placement="top-start"
                                title="提示"
                                width="220"
                                trigger="hover"
                                content="如果没有角色列表，请前往[系统设置]-[角色管理]菜单添加角色">
                                <i slot="reference" style="color:#E6A23C;font-size:18px;"><font-awesome-icon :icon="['fas','info-circle']"/></i>
                            </el-popover>
                        </el-col>
                    </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('addUserForm')" :loading="loading">确 定</el-button>
            </div>
        </el-dialog>        
    </section>

</template>

<script>
import api from "@/service/api";
import http from "@/service/http";
import store from "@/store";
import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("system/user");

export default {
  data() {
    return {
      dialogFormVisible: false,
      loading: false,
      addForm: {
        userName: "",
        pwd: "",
        realName: "",
        mobile: "",
        roles: [],
        selectRole: []
      },
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        pwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
        realName: [
          { required: true, message: "请输入真实姓名", trigger: "blur" }
        ],
        mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        selectRole: [
          { required: true, message: "请选择角色", trigger: "change" }
        ]
      },
      roles: []
    };
  },
  methods: {
    //导入actions方法
    ...mapActions(["getUsers"]),
    submitForm(formName) { 
      this.$refs[formName].validate(valid => {
        if (valid) {
          var param = {
            username: this.addForm.userName,
            password: this.addForm.pwd,
            realName: this.addForm.realName,
            mobile: this.addForm.mobile,
            roleIds: this.addForm.selectRole
          };
          console.log(param);
          this.addUser(param);
        } else {
          return false;
        }
      });
    },
    addUser(param) {
      this.loading = true;
      http.post(api.sysApi.addUser, param).then(data => {
        if(!data.success){
				return;
			}
        this.$message({
          showClose: true,
          message: "添加成功",
          type: "success"
        });
        //更新列表
        this.getUsers();
        this.dialogFormVisible = false;
        this.loading = false;
      });
    },
    resetForm(formName) { 
      this.addForm = {}; 
      this.$refs[formName].resetFields();
    },
    visibleChange(val) {
      if (!val) {
        //只有显示时才请求网络
        return;
      }
      //请求角色列表‘
      let param={
        pageNum:1,pageSize:200
      }
      http.post(api.sysApi.roleList, param).then(data => {
        this.roles = data.data;
      });
    }
  }
};
</script>

<style> 

</style>

